React experimental_useFormStatus: Εξειδίκευση στην Παρακολούθηση Κατάστασης Σφαλμάτων Φόρμας

Το συνεχώς εξελισσόμενο τοπίο της React εισάγει διαρκώς χαρακτηριστικά που στοχεύουν στην απλοποίηση της ανάπτυξης και στη βελτίωση της εμπειρίας του χρήστη. Μια τέτοια πρόσφατη προσθήκη, που βρίσκεται επί του παρόντος σε πειραματικό στάδιο, είναι το hook experimental_useFormStatus. Αυτό το ισχυρό εργαλείο παρέχει έναν βελτιστοποιημένο τρόπο παρακολούθησης της κατάστασης υποβολής φορμών, συμπεριλαμβανομένων των καταστάσεων σφάλματος, απευθείας μέσα στα components της React. Αυτό το άρθρο παρέχει έναν ολοκληρωμένο οδηγό για την κατανόηση και την αποτελεσματική χρήση του experimental_useFormStatus για τη δημιουργία στιβαρών και φιλικών προς το χρήστη φορμών.

Κατανόηση της Ανάγκης για το experimental_useFormStatus

Παραδοσιακά, η διαχείριση υποβολών φόρμας στη React περιλάμβανε ένα σημαντικό ποσό επαναλαμβανόμενου κώδικα (boilerplate code). Οι προγραμματιστές έπρεπε να παρακολουθούν χειροκίνητα τις καταστάσεις υποβολής (σε εκκρεμότητα, επιτυχία, σφάλμα), να χειρίζονται μηνύματα σφάλματος και να ενημερώνουν ανάλογα το UI. Αυτό μπορούσε να οδηγήσει σε πολύπλοκο και επιρρεπή σε σφάλματα κώδικα, ειδικά σε περίπλοκες φόρμες με πολλαπλούς κανόνες επικύρωσης και ασύγχρονες λειτουργίες.

Το experimental_useFormStatus αντιμετωπίζει αυτή την πρόκληση παρέχοντας έναν κεντρικό και δηλωτικό τρόπο διαχείρισης της κατάστασης υποβολής της φόρμας. Απλοποιεί τη διαδικασία παρακολούθησης σφαλμάτων, ένδειξης καταστάσεων φόρτωσης και παροχής ανατροφοδότησης στον χρήστη, με αποτέλεσμα καθαρότερο, πιο συντηρήσιμο και πιο αποδοτικό κώδικα.

Τι είναι το experimental_useFormStatus;

Το hook experimental_useFormStatus είναι ένα hook της React ειδικά σχεδιασμένο για να παρέχει πληροφορίες σχετικά με την κατάσταση υποβολής μιας φόρμας. Λειτουργεί σε συνδυασμό με την ιδιότητα action του στοιχείου <form> και τις server actions (ένα άλλο σχετικά νέο χαρακτηριστικό της React). Όταν υποβάλλεται μια φόρμα με ένα action που οδηγεί σε μια server action, το experimental_useFormStatus παρέχει δεδομένα για την τρέχουσα κατάσταση αυτής της υποβολής.

Συγκεκριμένα, το hook επιστρέφει ένα αντικείμενο που περιέχει τις ακόλουθες ιδιότητες:

• pending: Μια boolean τιμή που υποδεικνύει εάν η υποβολή της φόρμας είναι σε εξέλιξη.
• data: Τα δεδομένα που υποβλήθηκαν από τη φόρμα.
• method: Η μέθοδος HTTP που χρησιμοποιήθηκε για την υποβολή της φόρμας (π.χ., "POST", "GET").
• action: Η server action που ενεργοποιήθηκε από την υποβολή της φόρμας.
• error: Ένα αντικείμενο σφάλματος, εάν η υποβολή της φόρμας απέτυχε. Αυτό το αντικείμενο θα περιέχει πληροφορίες για το σφάλμα που συνέβη στον server.

Πώς να Χρησιμοποιήσετε το experimental_useFormStatus

Ας δούμε ένα πρακτικό παράδειγμα για να εξηγήσουμε πώς να χρησιμοποιήσετε το experimental_useFormStatus. Θα δημιουργήσουμε μια απλή φόρμα επικοινωνίας με πεδία για όνομα, email και μήνυμα, και θα δείξουμε πώς να χρησιμοποιήσετε το hook για να εμφανίσετε ενδείξεις φόρτωσης και μηνύματα σφάλματος.

Προαπαιτούμενα

Πριν ξεκινήσουμε, βεβαιωθείτε ότι έχετε ένα project React και χρησιμοποιείτε μια έκδοση της React που υποστηρίζει πειραματικά χαρακτηριστικά. Μπορεί να χρειαστεί να ενεργοποιήσετε τα πειραματικά χαρακτηριστικά στο αρχείο σας react.config.js (ή σε αντίστοιχη διαμόρφωση για το εργαλείο build σας). Επίσης, βεβαιωθείτε ότι έχετε ένα backend (π.χ., Node.js με Express) διαμορφωμένο για να χειρίζεται την υποβολή της φόρμας και να επιστρέφει τις κατάλληλες αποκρίσεις.

Παράδειγμα: Φόρμα Επικοινωνίας

Ακολουθεί ο κώδικας του React component:

import React, { useState } from 'react';
import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function handleSubmit(formData) {
  'use server';

  try {
    const response = await fetch('/api/contact', {
      method: 'POST',
      body: formData,
    });

    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.message || 'Η υποβολή της φόρμας απέτυχε');
    }

    // Χειρισμός επιτυχούς υποβολής (π.χ., ανακατεύθυνση, εμφάνιση μηνύματος επιτυχίας)
    console.log('Η φόρμα υποβλήθηκε με επιτυχία!');
    // Σε μια πραγματική εφαρμογή, μπορείτε να κάνετε ανακατεύθυνση ή να ενημερώσετε την κατάσταση εδώ
    return { success: true, message: 'Η φόρμα υποβλήθηκε με επιτυχία!' };

  } catch (error) {
    console.error('Σφάλμα κατά την υποβολή της φόρμας:', error);
    return { success: false, message: error.message };
  }
}

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: '',
  });

  const { pending, data, error } = useFormStatus();

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  return (
    

      

        Όνομα:
        
      
      

        Email:
        
      
      

        Μήνυμα:
              </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Υποβολή...' : 'Υποβολή'}
      </button>
      {error && <p className="error">Σφάλμα: {error.message}</p>}
      {data?.success && <p className="success">{data.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
</pre>

<h3>Επεξήγηση</h3>

<ol>
  <li><b>Εισαγωγή του <code>useFormStatus</code>:</b> Εισάγουμε το hook <code>experimental_useFormStatus</code> από το <code>react-dom</code>. Να θυμάστε ότι αυτό είναι ένα πειραματικό χαρακτηριστικό, οπότε η διαδρομή εισαγωγής μπορεί να αλλάξει σε μελλοντικές εκδόσεις της React.</li>
  <li><b>Κατάσταση Φόρμας (State):</b> Μια μεταβλητή κατάστασης <code>formData</code> που χρησιμοποιεί το <code>useState</code> παρακολουθεί το όνομα, το email και το μήνυμα που εισάγει ο χρήστης.</li>
  <li><b>Το Hook <code>useFormStatus</code>:</b> Καλούμε το <code>useFormStatus()</code> μέσα στο component. Αυτό το hook παρέχει αυτόματα πληροφορίες σχετικά με την κατάσταση υποβολής της φόρμας όταν η φόρμα υποβάλλεται μέσω μιας server action.</li>
  <li><b>Πρόσβαση στις Ιδιότητες Κατάστασης:</b> Εξάγουμε τα <code>pending</code>, <code>data</code>, και <code>error</code> από το αντικείμενο που επιστρέφεται από το <code>useFormStatus()</code>.</li>
  <li><b>Ένδειξη Φόρτωσης:</b> Χρησιμοποιούμε τη boolean μεταβλητή <code>pending</code> για να εμφανίσουμε υπό συνθήκη το μήνυμα "Υποβολή..." στο κουμπί υποβολής και να απενεργοποιήσουμε το κουμπί για να αποτρέψουμε πολλαπλές υποβολές.</li>
  <li><b>Διαχείριση Σφαλμάτων:</b> Εάν προκύψει σφάλμα κατά την υποβολή της φόρμας (όπως υποδεικνύεται από την ιδιότητα <code>error</code>), εμφανίζουμε ένα μήνυμα σφάλματος στον χρήστη.</li>
  <li><b>Μήνυμα Επιτυχίας:</b> Εάν η υποβολή είναι επιτυχής (όπως καθορίζεται από τη server action που επιστρέφει { success: true, message: '...' }), εμφανίζουμε ένα μήνυμα επιτυχίας.</li>
  <li><b>Server Action:</b> Η συνάρτηση <code>handleSubmit</code> επισημαίνεται με <code>'use server'</code>, καθιστώντας την μια server action. Χρησιμοποιεί το <code>fetch</code> για να στείλει τα δεδομένα της φόρμας σε ένα API endpoint (<code>/api/contact</code>).</li>
  <li><b>Διαχείριση Σφαλμάτων στη Server Action:</b> Η server action προσπαθεί να διαχειριστεί την κλήση API και πιθανά σφάλματα. Εάν υπάρχει σφάλμα στην απόκριση του API, ή μια εξαίρεση, επιστρέφει <code>{ success: false, message: '...' }</code>. Αυτό το μήνυμα είναι στη συνέχεια διαθέσιμο στην ιδιότητα <code>error</code> του hook <code>useFormStatus</code>.</li>
  <li><b>Ιδιότητα <code>action</code>:</b> Η ιδιότητα <code>action</code> του tag <code><form></code> έχει οριστεί στη server action <code>handleSubmit</code>. Αυτό λέει στη React να χρησιμοποιήσει αυτή τη συνάρτηση όταν υποβάλλεται η φόρμα.</li>
</ol>

<h3>Backend (Απλοποιημένο Παράδειγμα με Node.js και Express)</h3>

<p>Ακολουθεί ένα πολύ βασικό παράδειγμα ενός server Node.js που χρησιμοποιεί το Express για να διαχειρίζεται την υποβολή της φόρμας:</p>

<pre>
<code>
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
const port = 3001;

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.post('/api/contact', (req, res) => {
  const { name, email, message } = req.body;

  // Προσομοίωση επικύρωσης ή επεξεργασίας από την πλευρά του server (π.χ., αποστολή email)
  if (!name || !email || !message) {
    return res.status(400).json({ message: 'Όλα τα πεδία είναι υποχρεωτικά.' });
  }

  if (!email.includes('@')) {
     return res.status(400).json({message: 'Μη έγκυρη μορφή email.'});
  }

  // Προσομοίωση μιας επιτυχούς λειτουργίας με καθυστέρηση
  setTimeout(() => {
    console.log('Δεδομένα φόρμας ελήφθησαν:', { name, email, message });
    res.status(200).json({ message: 'Η φόρμα υποβλήθηκε με επιτυχία!' });
  }, 1000);
});

app.listen(port, () => {
  console.log(`Ο Server ακούει στη διεύθυνση http://localhost:${port}`);
});
</code>
</pre>

<h3>Βασικά Σημεία Προσοχής για το Backend:</h3>

<ul>
  <li><b>Επικύρωση:</b> Πάντα να εκτελείτε επικύρωση από την πλευρά του server για να διασφαλίσετε την ακεραιότητα και την ασφάλεια των δεδομένων.</li>
  <li><b>Διαχείριση Σφαλμάτων:</b> Εφαρμόστε στιβαρή διαχείριση σφαλμάτων για να αντιμετωπίσετε απρόσμενα προβλήματα και να επιστρέψετε ουσιαστικά μηνύματα σφάλματος στον client.</li>
  <li><b>Ασφάλεια:</b> Απολυμάνετε και επικυρώστε όλα τα δεδομένα εισόδου για να αποτρέψετε ευπάθειες ασφαλείας όπως το cross-site scripting (XSS) και το SQL injection.</li>
  <li><b>CORS:</b> Διαμορφώστε το Cross-Origin Resource Sharing (CORS) κατάλληλα για να επιτρέψετε αιτήματα από το domain της εφαρμογής σας React.</li>
  <li><b>Αποκρίσεις JSON:</b> Επιστρέψτε αποκρίσεις JSON στον client με τους κατάλληλους κωδικούς κατάστασης HTTP (π.χ., 200 για επιτυχία, 400 για σφάλματα client, 500 για σφάλματα server).</li>
</ul>

<h2>Οφέλη από τη Χρήση του <code>experimental_useFormStatus</code></h2>

<ul>
  <li><b>Απλοποιημένη Διαχείριση Φόρμας:</b> Η κεντρική διαχείριση της κατάστασης υποβολής της φόρμας μειώνει τον επαναλαμβανόμενο κώδικα και βελτιώνει την αναγνωσιμότητα του κώδικα.</li>
  <li><b>Βελτιωμένη Εμπειρία Χρήστη:</b> Η ανατροφοδότηση σε πραγματικό χρόνο για την κατάσταση υποβολής της φόρμας (ενδείξεις φόρτωσης, μηνύματα σφάλματος) ενισχύει την αλληλεπίδραση του χρήστη και μειώνει την απογοήτευση.</li>
  <li><b>Ενισχυμένη Διαχείριση Σφαλμάτων:</b> Η ευκολότερη πρόσβαση σε λεπτομερείς πληροφορίες σφάλματος επιτρέπει πιο στοχευμένη διαχείριση σφαλμάτων και βελτιωμένη αποσφαλμάτωση.</li>
  <li><b>Δηλωτική Προσέγγιση:</b> Το hook παρέχει έναν δηλωτικό τρόπο διαχείρισης της κατάστασης της φόρμας, καθιστώντας τον κώδικα πιο προβλέψιμο και ευκολότερο στην κατανόηση.</li>
  <li><b>Ενσωμάτωση με Server Actions:</b> Η απρόσκοπτη ενσωμάτωση με τις React Server Actions απλοποιεί την ανάκτηση και την τροποποίηση δεδομένων, οδηγώντας σε πιο αποδοτικές εφαρμογές.</li>
</ul>

<h2>Προχωρημένες Περιπτώσεις Χρήσης</h2>

<p>Πέρα από το βασικό παράδειγμα, το <code>experimental_useFormStatus</code> μπορεί να χρησιμοποιηθεί σε πιο σύνθετα σενάρια:</p>

<h3>1. Διαχείριση Πολλαπλών Φορμών σε μία Σελίδα</h3>

<p>Εάν έχετε πολλαπλές φόρμες σε μία σελίδα, κάθε φόρμα θα έχει τη δική της περίπτωση <code>useFormStatus</code>, επιτρέποντάς σας να παρακολουθείτε τις καταστάσεις υποβολής τους ανεξάρτητα.</p>

<h3>2. Εφαρμογή Προσαρμοσμένης Λογικής Επικύρωσης</h3>

<p>Μπορείτε να ενσωματώσετε το <code>useFormStatus</code> με προσαρμοσμένη λογική επικύρωσης για να εμφανίζετε σφάλματα επικύρωσης σε πραγματικό χρόνο. Για παράδειγμα, θα μπορούσατε να χρησιμοποιήσετε μια βιβλιοθήκη επικύρωσης όπως το Yup ή το Zod για να επικυρώσετε τα δεδομένα της φόρμας από την πλευρά του client πριν την υποβολή στον server. Η server action μπορεί στη συνέχεια να επιστρέψει σφάλματα επικύρωσης βασισμένα σε κανόνες του backend που μπορούν να εμφανιστούν χρησιμοποιώντας το <code>useFormStatus</code>.</p>

<h3>3. Αισιόδοξες Ενημερώσεις (Optimistic Updates)</h3>

<p>Μπορείτε να χρησιμοποιήσετε το <code>useFormStatus</code> για να υλοποιήσετε αισιόδοξες ενημερώσεις, όπου ενημερώνετε το UI αμέσως μετά την υποβολή της φόρμας από τον χρήστη, υποθέτοντας ότι η υποβολή θα είναι επιτυχής. Εάν η υποβολή αποτύχει, μπορείτε να επαναφέρετε το UI στην προηγούμενη του κατάσταση και να εμφανίσετε ένα μήνυμα σφάλματος.</p>

<h3>4. Ενδείκτες Προόδου για Μεταφόρτωση Αρχείων</h3>

<p>Ενώ το <code>useFormStatus</code> δεν παρέχει απευθείας ενημερώσεις προόδου για τη μεταφόρτωση αρχείων, μπορείτε να το συνδυάσετε με άλλες τεχνικές (π.χ., χρησιμοποιώντας το αντικείμενο <code>XMLHttpRequest</code> και το event <code>upload.onprogress</code>) για να εμφανίζετε ενδείκτες προόδου στον χρήστη.</p>

<h2>Συνήθεις Παγίδες και Πώς να τις Αποφύγετε</h2>

<ul>
  <li><b>Μη χρήση Server Actions:</b> Το <code>experimental_useFormStatus</code> έχει σχεδιαστεί κυρίως για να λειτουργεί με τις React Server Actions. Εάν δεν χρησιμοποιείτε server actions, θα χρειαστεί να διαχειριστείτε χειροκίνητα την κατάσταση υποβολής της φόρμας και να ενημερώσετε το UI ανάλογα, κάτι που αναιρεί τον σκοπό της χρήσης του hook.</li>
  <li><b>Λανθασμένη Διαχείριση Σφαλμάτων στον Server:</b> Βεβαιωθείτε ότι ο κώδικάς σας από την πλευρά του server διαχειρίζεται τα σφάλματα ομαλά και επιστρέφει ουσιαστικά μηνύματα σφάλματος στον client. Η ιδιότητα <code>error</code> του hook <code>useFormStatus</code> θα περιέχει πληροφορίες μόνο για σφάλματα που συμβαίνουν στον server.</li>
  <li><b>Αγνόηση Πιθανών Τρωτών Σημείων Ασφαλείας:</b> Πάντα να απολυμαίνετε και να επικυρώνετε τα δεδομένα εισόδου του χρήστη τόσο από την πλευρά του client όσο και από την πλευρά του server για να αποτρέψετε ευπάθειες ασφαλείας.</li>
  <li><b>Μη Παροχή Ανατροφοδότησης στον Χρήστη:</b> Είναι ζωτικής σημασίας να παρέχετε σαφή και έγκαιρη ανατροφοδότηση στον χρήστη σχετικά με την κατάσταση υποβολής της φόρμας (ενδείξεις φόρτωσης, μηνύματα σφάλματος, μηνύματα επιτυχίας). Αυτό βελτιώνει την εμπειρία του χρήστη και μειώνει την απογοήτευση.</li>
</ul>

<h2>Βέλτιστες Πρακτικές για τη Χρήση του <code>experimental_useFormStatus</code></h2>

<ul>
  <li><b>Χρησιμοποιήστε Ουσιαστικά Μηνύματα Σφάλματος:</b> Παρέχετε σαφή και περιεκτικά μηνύματα σφάλματος που βοηθούν τον χρήστη να καταλάβει τι πήγε στραβά και πώς να το διορθώσει.</li>
  <li><b>Εφαρμόστε Επικύρωση από την Πλευρά του Client:</b> Επικυρώστε τα δεδομένα της φόρμας από την πλευρά του client πριν την υποβολή στον server για να μειώσετε τις περιττές αιτήσεις στον server και να βελτιώσετε την εμπειρία του χρήστη.</li>
  <li><b>Διαχειριστείτε τα Σφάλματα Ομαλά:</b> Εφαρμόστε στιβαρή διαχείριση σφαλμάτων για να αντιμετωπίσετε απρόσμενα προβλήματα και να αποτρέψετε την κατάρρευση της εφαρμογής σας.</li>
  <li><b>Δοκιμάστε τις Φόρμες σας Εξονυχιστικά:</b> Δοκιμάστε τις φόρμες σας με διαφορετικά δεδομένα εισόδου και σενάρια για να διασφαλίσετε ότι λειτουργούν σωστά και ότι η διαχείριση σφαλμάτων λειτουργεί όπως αναμένεται.</li>
  <li><b>Διατηρήστε τον Κώδικά σας Καθαρό και Ευανάγνωστο:</b> Χρησιμοποιήστε περιγραφικά ονόματα μεταβλητών και σχόλια για να κάνετε τον κώδικά σας ευκολότερο στην κατανόηση και τη συντήρηση.</li>
  <li><b>Δώστε Προτεραιότητα στην Προσβασιμότητα:</b> Βεβαιωθείτε ότι οι φόρμες σας είναι προσβάσιμες σε όλους τους χρήστες, συμπεριλαμβανομένων αυτών με αναπηρίες. Χρησιμοποιήστε σημασιολογικό HTML, παρέχετε κατάλληλες ετικέτες για τα πεδία της φόρμας και βεβαιωθείτε ότι τα μηνύματα σφάλματος είναι ευδιάκριτα και κατανοητά.</li>
</ul>

<h2>Ζητήματα Διεθνοποίησης (Internationalization)</h2>

<p>Όταν δημιουργείτε φόρμες για ένα παγκόσμιο κοινό, λάβετε υπόψη τις ακόλουθες πτυχές διεθνοποίησης:</p>

<ul>
  <li><b>Τοπική προσαρμογή Μηνυμάτων Σφάλματος:</b> Βεβαιωθείτε ότι τα μηνύματα σφάλματος μεταφράζονται στην προτιμώμενη γλώσσα του χρήστη. Μπορείτε να χρησιμοποιήσετε μια βιβλιοθήκη τοπικής προσαρμογής όπως το <code>i18next</code> για τη διαχείριση των μεταφράσεων.</li>
  <li><b>Μορφοποίηση Ημερομηνίας και Αριθμών:</b> Χρησιμοποιήστε τις κατάλληλες μορφές ημερομηνίας και αριθμών με βάση την τοπική ρύθμιση (locale) του χρήστη.</li>
  <li><b>Μορφές Διευθύνσεων:</b> Προσαρμόστε τα πεδία διευθύνσεων ώστε να ταιριάζουν με τις μορφές διευθύνσεων διαφορετικών χωρών. Για παράδειγμα, ορισμένες χώρες χρησιμοποιούν ταχυδρομικούς κώδικες πριν από τα ονόματα των πόλεων, ενώ άλλες μετά.</li>
  <li><b>Επικύρωση Αριθμού Τηλεφώνου:</b> Εφαρμόστε επικύρωση αριθμού τηλεφώνου που υποστηρίζει διαφορετικούς κωδικούς χωρών και μορφές αριθμών τηλεφώνου.</li>
  <li><b>Διατάξεις από Δεξιά προς τα Αριστερά (RTL):</b> Υποστηρίξτε διατάξεις RTL για γλώσσες όπως τα Αραβικά και τα Εβραϊκά.</li>
</ul>

<p>Για παράδειγμα, μια φόρμα που ζητά έναν αριθμό τηλεφώνου θα πρέπει να προσαρμόζει δυναμικά τους κανόνες επικύρωσής της ανάλογα με τη χώρα που έχει επιλέξει ο χρήστης. Ένας αριθμός τηλεφώνου στις ΗΠΑ θα απαιτούσε έναν 10-ψήφιο αριθμό, ενώ ένας αριθμός τηλεφώνου στο Ηνωμένο Βασίλειο μπορεί να απαιτεί 11 ψηφία, συμπεριλαμβανομένου του αρχικού μηδενικού. Ομοίως, μηνύματα σφάλματος όπως "Μη έγκυρη μορφή αριθμού τηλεφώνου" πρέπει να μεταφράζονται στη γλώσσα του χρήστη.</p>

<h2>Συμπέρασμα</h2>

<p>Το <code>experimental_useFormStatus</code> είναι μια πολύτιμη προσθήκη στην εργαλειοθήκη της React, προσφέροντας έναν βελτιστοποιημένο και δηλωτικό τρόπο διαχείρισης της κατάστασης υποβολής φορμών. Αξιοποιώντας αυτό το hook, οι προγραμματιστές μπορούν να δημιουργήσουν πιο στιβαρές, φιλικές προς το χρήστη και συντηρήσιμες φόρμες. Καθώς αυτό το χαρακτηριστικό είναι επί του παρόντος πειραματικό, φροντίστε να παραμένετε ενημερωμένοι με την τελευταία τεκμηρίωση της React και τις βέλτιστες πρακτικές της κοινότητας. Αγκαλιάστε αυτό το ισχυρό εργαλείο για να αναβαθμίσετε τις δυνατότητές σας στο χειρισμό φορμών και να δημιουργήσετε εξαιρετικές εμπειρίες χρήστη για τις εφαρμογές σας.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">χειρισμός φόρμας</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">επικύρωση φόρμας</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">διαχείριση σφαλμάτων</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React hooks</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">πειραματικά χαρακτηριστικά</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">εμπειρία χρήστη</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ανάπτυξη web</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">κατάσταση φόρμας</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">κατάσταση υποβολής</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>